<template>
  <view class="box">


    <view class="top-box">
      <view>Hi</view>
      <view class="next-text">欢迎使用！</view>
    </view>
    <!-- 登录、注册 -->
    <view class="center-box">
      <view class="nav">
        <view :class="['left', {'select': current === 1}]" @click="clickLogin">
          <text>登录</text>
        </view>
        <view :class="['right', {'select': current === 0}]" @click="clickReg">
          <text>注册</text>
        </view>
      </view>
      <!-- 登录 -->
      <view class="input-box" v-show="current === 1">
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入商家账号" v-model="name" />

        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请输入商家密码" v-model="password" />
        </view>
        <view class="forget">
          <text class="link-text" @click="navigateToForgetPage">忘记密码?</text>
        </view>
        <view>
          <view class="admin" @click="navigateToAdminPage">
            <text>管理员登陆</text>
          </view>
        </view>
      </view>
      <!-- 注册 -->
      <view class="input-box" v-show="current === 0">
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入商家名" v-model="businessinfo.name" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入手机号" v-model="businessinfo.phone" />
        </view>
        <!-- <view class="wei-input">
					<icon type="waiting" color="#44ADFB" size="16"></icon>
					<input class="input" auto-focus placeholder="请输入验证码" v-model="code" />
					<text class="input-code" @click="getCode">{{codeText}}</text>
				</view> -->
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请输入密码" v-model="businessinfo.password" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请确认密码" v-model="businessinfo.confirmPassword" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入身份证" v-model="businessinfo.SFZ" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入昵称" v-model="businessinfo.nicname" />
        </view>
        <!-- <view class="wei-input">
					<icon type="success" color="#44ADFB" size="16"></icon>
					<input class="input" auto-focus placeholder="请输入性别" v-model="businessinfo.sex" />
				</view> -->
        <view class="sex">
          <radio-group @change="handleGenderChange">
            <radio value="男">男</radio>
            <radio value="女">女</radio>
          </radio-group>
        </view>
      </view>
      <view class="sumbit-btn">
        <button class="button" @click="businessLogin" style="background-color: #33ccff;font-size: 30rpx;"
          type="primary">立即{{current==1?'登录':'注册'}}</button>
        <view class="forget-section">
          <text class="link-text" @click="goBack"> 返回上一级页面</text>
        </view>
      </view>
    </view>
    <!-- 重影 -->
    <view class="shadow shadow-1"></view>
    <view class="shadow shadow-2"></view>
    <!-- 说明 -->
    <view class="bottom-box">
      关注文义喵~关注文义谢谢喵！
    </view>
  </view>
</template>

<script>
  import store from '../../store/index.js' //需要引入store

  export default {
    data() {
      return {
        current: 1,
        codeText: '获取验证码',
        counting: false,
        name: '',
        password: '',
        businessinfo: {
          name: '',
          password: '',
          confirmPassword: '',
          SFZ: '',
          nicname: '',
          phone: '',
          sex: '',
        }
      }
    },
    // computed: { ...mapState(['business']), },
    methods: {
      // 返回上一级，页面跳转
      goBack() {
        uni.navigateBack()
      },
      // 登陆注册监听
      clickLogin() {
        // const index = e.currentTarget.dataset.code;
        // this.current = index;
        this.current = 1
      },
      clickReg() {
        this.current = 0
      },
      // 页面跳转功能
      navigateToForgetPage() {
        uni.navigateTo({ url: '/pages/forget/forget' })
      },
      navigateToAdminPage() {
        uni.redirectTo({ url: '/pages/adminLogin/adminLogin' })
      },
      handleGenderChange(event) {
        this.businessinfo.sex = event.detail.value
      },
      // 商家登陆or注册
      businessLogin() {
        // 登陆
        if (this.current === 1) {
          uni.request({
            url: 'http://localhost:3007/api/loginBusin',
            method: 'POST',
            header: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: {
              name: this.name,
              password: this.password,
            },
            success: res => {

              // 登陆成功
              if (res.data.status === 0) {
                // 登陆成功后把business信息存储到state中
                console.log('res:', res)
                store.commit('loginBusiness', res.data.data.businessman)
                store.commit('updatetToken', res.data.token)
                console.log('登陆成功:' + res.data.token)
                // this.loginBusiness(res.data.data.businessman)
                // 测试 成功把business信息存储到了state中
                // console.log('business:', this.business)
                // uni.navigateTo({ url: '/subpkg/adminIndex/B-Infoadmin' })
                uni.reLaunch({ url: '/subpkg/B-index/B-index' })

              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({ title: '网络请求失败' })
            }

          })
        }
        // 注册
        if (this.current === 0) {
          uni.request({
            url: 'http://localhost:3007/api/regBusin',
            method: 'POST',
            header: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: {
              // id: this.businessinfo.id,
              name: this.businessinfo.name,
              password: this.businessinfo.password,
              SFZ: this.businessinfo.SFZ,
              nicname: this.businessinfo.nicname,
              phone: this.businessinfo.phone,
              sex: this.businessinfo.sex
            },
            success: res => {
              console.log(res)
              console.log(this.businessinfo)
              // 确认密码
              if (this.businessinfo.password != this.businessinfo.confirmPassword) {
                uni.showToast({
                  title: '两次密码不一致',
                  icon: 'none',
                })
              }
              // 注册成功，跳转到登录页面
              else if (res.data.status === 0) {
                uni.showToast({ title: '注册成功请登录' })
                setTimeout(function() {
                  uni.navigateTo({ url: '/pages/busiLogin/busiLogin' })
                }, 600)
              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({ title: '网络请求失败' })
            }

          })
        }
      },
      // 获取验证码
      getCode() {

        console.log(this.counting)
        if (!this.counting) {
          uni.showToast({ title: '验证码已发送', })
          //开始倒计时60秒
          this.countDown(60)
        }
      },

      //倒计时60秒
      countDown(count) {
        if (count === 0) {
          this.codeText = '获取验证码'
          this.counting = false
          return
        }
        this.counting = true
        this.codeText = count + '秒后重新获取'
        setTimeout(() => {
          count--
          this.countDown(count)
        }, 1000)
      },

    },
  }
</script>

<style lang="scss">
  page {
    height: 100%;
    background-color: white;
    margin: 0px;
    padding: 0px;
  }

  .box {
    // margin-top: 15%;
  }

  /* 顶部背景 */
  .top-box {
    height: 30%;
    background-image: linear-gradient(#fb4499, #b85f70);
    padding: 30rpx;
    color: yellow;
    font-weight: bold;
  }

  .next-text {
    margin-top: 15rpx;
  }

  .forget-section {
    font-size: 28rpx;
    color: #4399fc;
    text-align: center;
    margin-top: 40rpx;
  }

  /* 内容 */
  .center-box {
    background-color: white;
    margin: 20% 20rpx 0rpx 20rpx;
    padding: 25rpx;
    border-radius: 15rpx;
    -webkit-filter: drop-shadow(0 0 8rpx #fb7844);
    filter: drop-shadow(0 0 8rpx #fb4444);
  }

  /* 导航 */
  .nav {
    display: flex;
    text-align: center;
    font-size: 32rpx;
    margin-bottom: 8%;
  }

  .left {
    flex: 1;
    font-weight: bold;
  }

  .right {
    flex: 1;
    font-weight: bold;
  }

  .select {
    font-weight: bold;
    color: #ff335f;
  }

  .select text {
    padding-bottom: 5rpx;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    border-bottom: 5rpx solid #ff9633;
  }

  .wei-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ec1354f6;
  }

  .input-box {
    margin: 20rpx;
  }

  .input {
    padding-left: 20rpx;
    font-size: 30rpx;
  }

  .input-code {
    position: absolute;
    right: 40rpx;
    font-size: 26rpx;
    padding: 10rpx 15rpx;
    color: white;
    background-color: #FF8C69;
    border-radius: 10rpx;
  }

  .forget {
    font-size: 26rpx;
    color: #ff3370f1;
    margin-top: 20rpx;
    text-align: right;
  }

  .admin {
    font-size: 26rpx;
    color: #ff5c33ef;
    margin-top: -32rpx;
    text-align: left;
  }

  .sumbit-btn {
    margin: 6% 30rpx 30rpx 30rpx;
  }

  /* 重影 */
  .shadow {
    box-shadow: 0rpx 0rpx 10rpx 0rpx #fb7844;
    border-radius: 25rpx;
    background-color: white;
  }

  .shadow-1 {
    height: 40rpx;
    margin: -20rpx 50rpx 0 50rpx;
  }

  .shadow-2 {
    position: relative;
    z-index: -888;
    height: 50rpx;
    margin: -30rpx 80rpx 0 80rpx;
  }

  /* 最底部 */
  .bottom-box {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    font-size: 24rpx;
    color: gray;
    display: flex;
    justify-content: center;
  }

  .sex {
    margin-top: 35rpx;
    text-align: center;
  }
</style>